<template>
	<!-- 底部tab栏 -->
	<van-tabbar v-model="currIndex" active-color="#2699FA">
		<van-tabbar-item v-for="(item,index) in tabbars" :key="index" @click="tab(index)" :replace="true" :to="item.routerName">
			<span :class="currIndex == index ? 'active':''">{{item.title}}</span>
			<van-icon class="iconfont" class-prefix="icon" slot="icon" slot-scope="props" :name="props.active?`${item.iconName.active}`:`${item.iconName.normal}`"></van-icon>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {tabbars} from 'util/tabConfig.js'; 
	export default {
		name: 'foot',
		computed: {
			...mapState(['tabIndex'])
		},
		data() {
			return {
				currIndex:'',
				tabbars:tabbars
			}
		},
		methods: {
			...mapMutations(['SET_TAB_INDEX']),
			// 切换tab栏
			tab(index) {
				this.SET_TAB_INDEX(index);
			},
		},
		
		created(){
			this.currIndex = this.tabIndex;
		}
	}
</script>

<style>
</style>


<!-- 使用
* 
* //引入svg组件
import IconSvg from '@/components/IconSvg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

//在代码中使用
<icon-svg icon-class="password" />

* 
* 
*  -->
